<template>
    <div class="control_tip">提示：预览模式下，提交将不被记录</div>
    <div v-if="isSubmit" class="preview-phone">
        <div class="submit_tip">
            <!-- <el-icon color="#5CDA69"><SuccessFilled /></el-icon> -->
            <img src="@/assets/image/content/submit-success.png" alt="" class="submit-icon" />
            <div class="submit-text">提交成功</div>
            <div class="submit-end-text">{{ submitInfo?.conclusion }}</div>
        </div>
        <!-- <img src="@/assets/image/normal_qrcode.png" alt="" />
        <div class="tip">{{ '长按识别二维码添加客服' }}</div> -->
        <img v-show="submitInfo?.ads" class="custom-img" :src="submitInfo?.ads" alt="" />
        <div
            v-show="submitInfo?.submit_settings?.redirect.enable && submitInfo?.submit_settings?.redirect.enable != 1"
            class="qr_code">
            <img src="@/assets/image/normal_qrcode.png" alt="" />
            <div class="tip">
                {{ submitInfo.submit_settings?.redirect?.code_scanning_guidance || '长按识别二维码添加客服' }}
            </div>
        </div>
    </div>
    <ControlCard
        v-else
        class="previre-form"
        :control-card-columns="props.controlCardColumns"
        :cover-image="props.coverImage"
        :activity_data="props.activity_data"
        :read-only="readOnly" />
</template>
<script lang="tsx" setup>
import { defineProps, provide, reactive, ref, defineExpose } from 'vue';
import ControlCard from './ControlCard';

const props = defineProps(['controlCardColumns', 'coverImage', 'readOnly', 'activity_data', 'submitInfo']);

const formDataModel = reactive({});
for (const iterator of props.controlCardColumns) {
    if (iterator.type === 'muti_select' || iterator.type === 'picture') {
        // 多选\图片
        formDataModel[iterator.key] = [];
    } else if (iterator.type === 'rate') {
        // 评分
        formDataModel[iterator.key] = undefined;
        formDataModel[`${iterator.key}_text`] = undefined;
    } else if (iterator.type === 'pca') {
        // 地区
        formDataModel[iterator.key] = [];
        formDataModel[`${iterator.key}_text`] = undefined;
    } else {
        formDataModel[iterator.key] = undefined;
    }
}
const isSubmit = ref<boolean>(false);
const setState = (val = false) => {
    isSubmit.value = val;
};
provide('formDataModel', formDataModel);
provide('setState', setState);
defineExpose({
    setState
});
</script>

<style lang="scss" scoped>
@mixin card {
    box-sizing: border-box;
    width: 414px;
    background-color: #fff;
    box-shadow: 0 12px 48px 16px rgb(0 0 0 / 3%);
}

.previre-form {
    @include card;
}

.control_tip {
    text-align: center;
    margin-bottom: 16px;
    color: #969696;
    font-size: 12px;
}

.preview-phone {
    @include card;

    border-radius: 20px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 0 120px;

    .custom-img {
        width: calc(100% - 40px);
        margin: 0 auto;
    }

    .qr_code {
        width: calc(100% - 40px);
        margin: 0 auto;
        min-height: calc(100% - 40px);
        padding: 30px;
        box-sizing: border-box;
        border-radius: 8px;
        box-shadow: 0 2px 24px 0 #eaeaea;
        background: #fff;
        margin-top: 30px;
        margin-bottom: 20px;

        img {
            width: 100%;
        }
    }

    .submit_tip {
        margin-bottom: 20px;
        color: #666;

        .submit-icon {
            width: 48px;
            height: 48px;
            margin-bottom: 13px;
        }

        .submit-text {
            font-size: 18px;
            font-family: PingFangSC-Medium, 'PingFang SC';
            font-weight: 500;
            color: #33302d;
            line-height: 25px;
        }

        .submit-end-text {
            font-size: 12px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #33302d;
            line-height: 17px;
            margin: 10px 0 20px;
            white-space: break-spaces;
            word-break: break-all;
            word-wrap: normal;
        }

        > i {
            vertical-align: bottom;
            margin-right: 4px;
        }
    }

    .tip {
        margin-top: 12px;
        font-size: 14px;
        color: #ccc;
    }
}
</style>
